<template>
	<view>

		<view class="">

			<view class="banmi_flex a-c p-20 bb" style="padding-top: 50px;">
				<view class="banmi_input_name">附件目录:</view>
				<view class="banmi_input_view">
					<text>/attachment/storage/</text>
				</view>
			</view>


			<view class="banmi_flex a-c p-20 bb">
				<view class="banmi_input_name">图片储存设置:</view>

				<view class=" ">
					<view class="banmi_flex" style="justify-content: flex-start;flex-wrap: wrap;">
						<button style="flex-shrink:0;" class="banmi_flex a-c m-l-10" @click="on_oss(index)"
							v-for="(vo,index) in oss_list">
							<view class="q-y  banmi_flex a-c j-c" :class="find.oss == vo.type ? 'key_xz' : 'key_wxz'">
								<text v-if="find.oss== vo.type " class="f-14">✓</text>
							</view>
							<text class="f-14 c_7" style="margin-left: 5px;"
								:class="find.oss== vo.type ? 'key_color' : ''">{{vo.name}}</text>
						</button>
					</view>
				</view>
			</view>
			<template v-if="find.oss==2">
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">阿里云KeyId:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.ali_accessKeyId" placeholder="请输入accessKeyId">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">阿里云KeySecret:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.ali_accessKeySecret" placeholder="请输入KeySecret">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">阿里云bucket名称:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.ali_bucket" placeholder="请输入bucket">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">阿里云endpoint名称:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.ali_endpoint" placeholder="请输入endpoint">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">阿里云图片地址/结尾:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.ali_url" placeholder="请输入阿里云图片地址">
						</uni-easyinput>
					</view>
				</view>
			</template>
			<template v-if="find.oss==3">
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">腾讯云secretId:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.tx_secretId" placeholder="请输入secretId">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">腾讯云secretKey:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.tx_secretKey" placeholder="请输入secretKey">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">腾讯云bucket名称:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.tx_bucket" placeholder="请输入bucket">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">腾讯云region地区:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.tx_region" placeholder="请输入region">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">腾讯云图片地址/结尾:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.tx_url" placeholder="请输入腾讯云图片地址">
						</uni-easyinput>
					</view>
				</view>
			</template>

			<template v-if="find.oss==1">
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">七牛云accessKey:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.qiniu_accessKey" placeholder="请输入accessKey">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">七牛云secretKey:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.qiniu_secretKey" placeholder="请输入secretKey">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">七牛云储存名称:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.qiniu_name" placeholder="请输入name">
						</uni-easyinput>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">七牛云储存地区选择:</view>
					<view class="banmi_input_view">
						<uni-data-select :value="region_val" :localdata="qiniu_s" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="banmi_flex a-c p-20">
					<view class="banmi_input_name">七牛云图片地址/结尾:</view>
					<view class="banmi_input_view">
						<uni-easyinput v-model="find.qiniu_url" placeholder="请输入云图片地址">
						</uni-easyinput>
					</view>
				</view>
			</template>
			<view class="banmi_flex a-c p-20">
				<view class="banmi_input_name"></view>
				<view class="banmi_input_view">
					<button type="primary" style="background-color: #007AFF;" size="mini" @click="on_save"
						class="banmi_but">
						保存
					</button>
				</view>
			</view>


			<view class="p-20 l5">
				<view class=" ">
					<view class="f-14" style="color: #0000FF;">
						小程序上传白名单：{{up_url}}
					</view>
					<view class="f-14 p-t-10" style="color: #0000FF;">
						小程序图片白名单：{{down_url}}
					</view>
				</view>
			</view>


			<view class="p-20 l5">
				<view class="flex  ">
					<rich-text class="" style="font-size: 14px;color: red;line-height: 30px;"
						:nodes="datahtml1"></rich-text>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		props: {

			money: {
				type: Number,
				default: 1
			},

			version: {
				type: String,
				default: ''
			},

			list_goods: {
				type: Array,
				default: function() {
					return [] //数据
				}
			}
		},
		data() {
			return {
				region_val: 0,
				oss_list: [{
						"type": 0,
						"name": "本地服务器",
						"text": ''
					},
					{
						"type": 1,
						"name": "七牛云",
						"text": ''
					},
					{
						"type": 2,
						"name": "阿里云",
						"text": ''
					},

					{
						"type": 3,
						"name": "腾讯云",
						"text": ''
					}
				],
				codetime: 8,
				find: {
					ali_accessKeyId: '',
					ali_accessKeySecret: '',
					ali_bucket: '',
					ali_endpoint: '',
					tx_secretId: '',
					tx_secretKey: '',
					tx_region: '',
					tx_bucket: ''
				},
				name: '',
				keya: '',
				up_url: '',
				down_url: '',
				qiniu_s: [{
						text: '华东-ECN',
						value: 0,
						url: 'https://up.qbox.me',
					},
					{
						text: '华南-SCN',
						value: 1,
						url: 'https://up-z2.qbox.me',
					},
					{
						text: '华北-NCN',
						value: 2,
						url: 'https://up-z1.qbox.me',
					},
					{
						text: '北美-NA',
						value: 3,
						url: 'https://up-na0.qbox.me',
					},
					{
						text: '新加坡-ASG',
						value: 4,
						url: 'https://up-as0.qbox.me',
					},
				],
				qiniu_diqu: '',
				datahtml1: '1.更换储存时请把图片也移动到更换的空间（否则图片不显示）<br>2.小程序需设置上传和云图片链接白名单<br>3.云上传不通过服务器，都是通过wwb端直传oss<br>4.阿里云,腾讯云请设置允许跨域',

			};
		},
		mounted() {
			this.init();

		},
		watch: {
			find: {
				// 数据变化时执行的逻辑代码
				handler(newName, oldName) {
					this.is_url(newName.oss);
				},
				// 开启深度监听
				deep: true
			}
		},
		methods: {
			async init() {
				var that = this;
				const ret = await this.Banmikeji.index_index({});
				this.find = ret.data
				that.is_url(ret.data.oss);

				for (var i = 0; i < that.qiniu_s.length; i++) {
					if (that.qiniu_s[i]['text'] == that.find.qiniu_region) {
						that.region_val = i;
					}
				}
			},
			async on_save() {
				var that = this;

				const ret = await this.Banmikeji.Settings_set_oss_save(that.find);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
			},
			on_oss(val) {
				this.find.oss = val
				this.is_url(val);
			},
			change(val) {
				this.region_val = val;
				this.find.qiniu_region = this.qiniu_s[val]['text'];
			},
			is_url(oss) {
				oss = String(oss)

				switch (oss) {
					case '0':
						this.up_url = this.find.home_url
						this.down_url = this.find.home_url
						break;
					case '1':
						this.up_url = this.qiniu_s[this.region_val]['url']
						this.down_url = this.find.oss_url

						break;
					case '2':
						if (this.find.ali_bucket && this.find.ali_endpoint) {
							this.up_url = 'https://' + this.find.ali_bucket + '.' + this.find.ali_endpoint;
						}

						this.down_url = this.find.oss_url
						break;
					case '3':

						if (this.find.tx_bucket && this.find.tx_region) {
							this.up_url = 'https://' + this.find.tx_bucket + '.cos.' + this.find.tx_region +
								'.myqcloud.com';
						}

						this.down_url = this.find.oss_url
						break;

				}
			},





		}
	}
</script>

<style lang="scss">
	button {
		padding: 0;
		background: transparent;
	}

	button::after {
		border: none;
	}

	.key_color {
		color: #1E90FF;
	}

	.key_xz {
		width: 15px;
		height: 15px;
		border: solid 1px #1E90FF;
		color: #1E90FF;
	}

	.key_wxz {
		width: 15px;
		height: 15px;
		border: solid 1px #7C838B;
		color: #7C838B;
	}
</style>